<template>
  <div>
    <el-dialog :title='option.title' :visible.sync='option.isShow' width="820px" @open="openUpdate" @close="closeUpdete"
      :close-on-click-modal=false>
      <div v-loading="loading">
        <el-card>
          <el-form ref='form' :model='form' size="mini" :rules="rules" label-width="150px" label-position="left">
            <el-row :gutter="40">
              <el-col :span='12'>
                <el-form-item label="播放规则ID:" prop='ruleId' v-if="option.isDisabled">
                  <el-input v-model="form.ruleId" :disabled="true" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span='12'>
                <el-form-item label="机构编号:" prop='brno'>
                  <el-select v-model="form.brno" filterable placeholder="请选择机构编号" @change="adInfoQuery()">
                    <el-option v-for="item in option.branchNum" :key="item.orgno" :label="item.orgno+'-'+item.cname"
                      :value="item.orgno" :disabled="item.disabled">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="广告用途:" prop='adPurpose'>
                  <el-select v-model="form.adPurpose"  placeholder="请选择广告用途" >
                    <el-option
                    v-for="item in adPurposeList"
                    :key="item.DataKeyVal"
                    :label="item.Meaning"
                    :value="item.DataKeyVal"
                    :disabled="item.disabled">
                    </el-option></el-select>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="设备类型" prop='deviceType'>
                  <el-select v-model="form.deviceType" placeholder="请选择设备类型" >
                    <el-option
                    v-for="item in deviceTypeList"
                    :key="item.DataKeyVal"
                    :label="item.Meaning"
                    :value="item.DataKeyVal"
                    :disabled="item.disabled">
                    </el-option></el-select>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="位置序号:" prop='sort'>
                  <el-input-number v-model="form.sort"  :min="1" placeholder="请输入位置序号"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="广告类型" prop='adType'>
                  <el-select v-model="form.adType" placeholder="请选择广告类型" @change="adInfoQuery('1')">
                    <el-option
                    v-for="item in adTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                    </el-option></el-select>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="广告编号" prop='adNo'>
                  <el-select v-model="form.adNo" multiple placeholder="请选择广告编号" >
                    <el-option
                    v-for="item in adNoList"
                    :key="item.AdNo"
                    :label="item.AdName"
                    :value="item.AdNo"
                    :disabled="item.disabled">
                    <span style="float: left">{{ item.AdNo+'-'+item.AdName }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span='12'>
                <el-form-item label="图片样式" v-if="form.adType == 'P'" prop='pictureStyle'>
                  <el-select v-model="form.pictureStyle" placeholder="请选择图片样式" >
                    <el-option
                    v-for="item in pictureStyleList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                    </el-option></el-select>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="音频样式" v-if="form.adType == 'V'" prop='voiceStyle'>
                  <el-input v-model="form.voiceStyle" placeholder="请输入音频样式" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="视频样式" v-if="form.adType == 'V'" prop='videoStyle'>
                  <el-input v-model="form.videoStyle" placeholder="请输入视频样式" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="文字样式" v-if="form.adType == 'C'" prop='wordStyle'>
                  <el-select v-model="form.wordStyle" placeholder="请选择文字样式" >
                    <el-option
                    v-for="item in wordStyleList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                    </el-option></el-select>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="播放样式" prop='playStyle'>
                  <el-select v-model="form.playStyle" placeholder="请选择播放样式" >
                    <el-option
                    v-for="item in playStyleList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                    </el-option></el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span='12'>
                <el-form-item label="文件播放间隔时间:" prop='fileSpaceTime'>
                  <el-input-number v-model="form.fileSpaceTime"  :min="1" placeholder="请输入文件播放间隔时间"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="广告播放间隔时间:" prop='adSpaceTime'>
                  <el-input-number v-model="form.adSpaceTime"  :min="1" placeholder="请输入广告播放间隔时间"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="主页面是否显示" prop='homePlayFlag'>
                  <el-select v-model="form.homePlayFlag" placeholder="请选择主页面是否显示" @change="resetHomeTime" >
                    <el-option
                    v-for="item in defaultFlagList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                    </el-option></el-select>
                </el-form-item>
              </el-col>
              <el-col :span='12'>
                <el-form-item label="主界面显示间隔时间:" prop='homeSpaceTime' v-if="form.homePlayFlag == '1'">
                  <el-input-number v-model="form.homeSpaceTime"  :min="1" placeholder="请输入主界面显示间隔时间"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span='12'>
                <el-form-item label="是否默认" prop='defaultFlag'>
                  <el-select v-model="form.defaultFlag" placeholder="请选择是否默认" >
                    <el-option
                    v-for="item in defaultFlagList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                    </el-option></el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span='24'>
                <el-form-item label="备注:" prop='message'>
                  <el-input v-model="form.message" placeholder="请输入备注内容"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-row style="margin:20px 0;text-align:right">
          <el-button size='mini' @click="option.isShow=false">返回</el-button>
          <el-button type='primary' size='mini' @click="ItemUpdate">确定</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import request from "@/common/utils/request";
  import toolBox from "@/common/utils/toolBox";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import selectLoad from "@/message/shared/dict-select-load";
  import adInfoQuery from "@/message/resourceManage/advertising/ad-upload-table";
  import adsRuleAdd from "@/message/resourceManage/advertising/adsRuleManage/ads-rule-add";
  import adsRuleUpdate from "@/message/resourceManage/advertising/adsRuleManage/ads-rule-update";





  export default {
    props: {
      option: Object
    },
    data() {
      const validateAdNo = (rule, value, callback) => {
        if (this.form.adType == "P") {
          if(value.length >3){
            callback(new Error("播放规则最多绑定3个图片广告信息"));
          }
        }
        //  else {
        //   if(value.length >1){
        //     callback(new Error("播放规则最多绑定1个视频或文字广告信息"));
        //   }
        // }
        callback();
      };
      return {
        loading: false,
        adPurposeList: [],
        deviceTypeList: [],
        adTypeList:[],
        pictureStyleList: [],
        wordStyleList: [],
        playStyleList: [],
        defaultFlagList: [],
        adNoList: [],
        form: {
          ruleId: "",
          brno: "",
          adPurpose: "",
          deviceType: "",
          sort: "1",
          adType: "",
          adNo: [],
          pictureStyle: "0",
          voiceStyle: "",
          videoStyle: "",
          wordStyle: "0",
          playStyle: "1",
          fileSpaceTime: "",
          adSpaceTime: "",
          homePlayFlag: "1",
          homeSpaceTime: "",
          defaultFlag: "1",
          message: "",
        },
        rules: {
          brno: [{
              required: true,
              message: "请选择机构编号",
              trigger: "change"
            }],
          adPurpose: [{
            required: true,
            message: "请选择广告应用途",
            trigger: "change"
          }],
          sort: [{
            required: true,
            message: "请输入位置序号",
            trigger: "blur"
          }],
          deviceType: [{
            required: true,
            message: "请选择设备类型",
            trigger: "change"
          }],
          adNo: [{
            type: 'array',
            required: true,
            message: "请选择广告编号",
            trigger: "change"
          },
          {  validator: validateAdNo,  trigger: 'change' }]
        }
      };
    },
    created() {
      this.adTypeList = toolBox.objToArray(getGlobalParams.get("adType"));
      this.pictureStyleList = toolBox.objToArray(getGlobalParams.get("PictureStyle"));
      this.playStyleList = toolBox.objToArray(getGlobalParams.get("PlayStyle"));
      this.defaultFlagList = toolBox.objToArray(getGlobalParams.get("IsReserve"));
      this.wordStyleList = toolBox.objToArray(getGlobalParams.get("WordStyle"));
    },
    methods: {
      openUpdate() {
        this.loading = true;
        this.adPurposeLoad();
        this.deviceTypeLoad();
        if (this.option.mark == "2") {
          this.setData();
          this.adInfoQuery();
          this.form.adNo = this.option.currentRow.AdNo.split(',');
        } else {
          if (this.$refs.form) {
            this.$refs.form.clearValidate(); //清楚表单验证
          }
        }
        this.loading = false;
      },
      deviceTypeLoad(){
        let resBody = new selectLoad();
        resBody.data.DataKey = 'DeviceType';
        request(resBody)
          .then(response => {
            if (response.APP_HEAD.ReturnCode === "000000") {
              this.deviceTypeList =  response.RspInfo.Result || [];
            } else {
              this.$message({
                type: "warning",
                message: SYS_HEAD.ReturnMessage
              });
            }
          })
          .catch(error => {
            console.error("查询错误", error);
          });
      },
      adInfoQuery(val){
        this.loading = true;
        if(this.form.brno == "" || this.form.adType == ""){
          this.loading = false;
          return false;
        }
        if(val){
          this.form.voiceStyle = ""
          this.form.videoStyle = ""
          this.form.wordStyle = "0"
          this.form.pictureStyle = "0"
        }
        this.form.adNo = [];
        let resBody = new adInfoQuery();
        resBody.data.Brno = this.form.brno
        resBody.data.AdType = this.form.adType;
        resBody.data.QueryPageNo = '1';
        resBody.data.QueryRowNum = '99999';
        request(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.adNoList =  response.RspInfo.resultSet || [];
            } else {
              this.$message({
                type: "warning",
                message: SYS_HEAD.ReturnMessage
              });
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
            console.error("查询错误", error);
          });
      },
      adPurposeLoad(){
        let resBody = new selectLoad();
        resBody.data.DataKey = 'Purpose';
        request(resBody)
          .then(response => {
            if (response.APP_HEAD.ReturnCode === "000000") {
              this.adPurposeList =  response.RspInfo.Result || [];
            } else {
              this.$message({
                type: "warning",
                message: SYS_HEAD.ReturnMessage
              });
            }
          })
          .catch(error => {
            console.error("查询错误", error);
          });
      },
      setData() { //设置修改回显数据
        this.form.brno = this.option.currentRow.Brno;
        this.form.message = this.option.currentRow.Remark;
        this.form.deviceType = this.option.currentRow.DeviceType;
        this.form.adType = this.option.currentRow.PlayRuleType;
        this.form.playStyle = this.option.currentRow.PlayStyle;
        this.form.fileSpaceTime = this.option.currentRow.FileSpaceTime;
        this.form.adSpaceTime = this.option.currentRow.AdSpaceTime;
        this.form.homePlayFlag = this.option.currentRow.HomePlayFlag;
        this.form.homeSpaceTime = this.option.currentRow.HomeSpaceTime;
        this.form.defaultFlag = this.option.currentRow.DefaultFlag;
        this.form.adPurpose = this.option.currentRow.Purpose;
        this.form.sort = this.option.currentRow.SerialNum;
        this.form.pictureStyle = this.option.currentRow.PictureStyle;
        this.form.videoStyle = this.option.currentRow.VideoStyle;
        this.form.wordStyle = this.option.currentRow.WordStyle;
        this.form.voiceStyle = this.option.currentRow.VoiceStyle;
        this.form.ruleId = this.option.currentRow.PlayRuleID;
      },
      closeUpdete() {
        this.$refs.form.resetFields(); //清楚表单验证
        this.$refs.form.clearValidate(); //清楚表单验证
      },
      resetHomeTime() {
        if(this.form.homePlayFlag == '0'){
          this.form.homeSpaceTime = ""
        }
      },
      ItemUpdate() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true;
            let resBody = this.option.mark == "1" ? new adsRuleAdd() : new adsRuleUpdate();
            resBody.data.PlayRuleID = this.form.ruleId
            resBody.data.Brno = this.form.brno
            resBody.data.Remark = this.form.message
            resBody.data.DeviceType = this.form.deviceType
            resBody.data.AdNo = this.form.adNo.join(',')
            resBody.data.PlayRuleType = this.form.adType
            resBody.data.PlayStyle = this.form.playStyle
            resBody.data.FileSpaceTime = this.form.fileSpaceTime
            resBody.data.AdSpaceTime = this.form.adSpaceTime
            resBody.data.HomePlayFlag = this.form.homePlayFlag
            resBody.data.HomeSpaceTime = this.form.homeSpaceTime
            resBody.data.DefaultFlag = this.form.defaultFlag
            resBody.data.Purpose = this.form.adPurpose
            resBody.data.SerialNum = this.form.sort
            resBody.data.PictureStyle = this.form.pictureStyle
            resBody.data.VideoStyle = this.form.videoStyle
            resBody.data.WordStyle = this.form.wordStyle
            resBody.data.VoiceStyle = this.form.voiceStyle
            console.log(resBody)
            request(resBody)
              .then(response => {
                if (response.APP_HEAD.ReturnCode === "000000") {
                  this.$emit("refreshTable");
                  this.option.isShow = false;
                  let mes = this.option.mark == "1" ? "创建" : "修改";
                  this.$message({
                    type: "success",
                    message: `${mes}${response.SYS_HEAD.ReturnMessage}!`
                  });
                } else {
                  this.$message({
                    type: "error",
                    message: `${response.SYS_HEAD.ReturnMessage}!`
                  });
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              });
          } else {
            this.$message({
              type: "warning",
              message: "请输入合法的数据！"
            });
            return false;
          }
        });
      }
    }
  };

</script>

<style lang="scss">
</style>
